import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import RootLayout from './layouts/RootLayout';
import LoginPage from './pages/LoginPage';
import UsernamePasswordLoginPage from './pages/LoginPage/UsernamePasswordLoginPage';
import { useGlobalInfoStore } from './store/global-info';
import { useEffect } from 'react';
import { sleep } from './common/sleep';
import { useMeStore } from './store/me';
import UsersPage from './pages/UsersPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: '', element: <HomePage /> },
      { path: '/about', element: <AboutPage /> },
      { path: '/login', element: <LoginPage /> },
      { path: '/login/up', element: <UsernamePasswordLoginPage /> },
      { path: '/users', element: <UsersPage /> },
    ],
  },
]);

export default function App() {
  const globalInfo = useGlobalInfoStore();
  const meStore = useMeStore();
  useEffect(() => {
    (async () => {
      await sleep(2000);
      globalInfo.load();
      meStore.load();
    })();
  }, []);
  return <RouterProvider router={router} />;
}
